<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<%@ include file="/taglibs.jsp"%>
<head>
<script type="text/javascript" src="${ctx}/scripts/jqueryvalidate/jquery.validate.js"></script>
<%@ include file="/WEB-INF/jsps/includes/jqueryui.jsp"%>
</head>
<body>
<ul>
	<li>Create a new person here!</li>
</ul>


<div id="signupwrap">
	<form id="signupform" action="" method="POST" autocomplete="off" >
	<p>注册就送礼金</p>

	<div class="row">
		<span class="label"><label id="lemail" for="email">您的Email</label></span>
		<span class="field"><input type="text" id ="email" name="person.email" /></span>
		<span class="status"></span>
	</div>
	<div class="row">
		<span class="label"><label id="lpassword" for="password">设置书伴密码</label></span>
		<span class="field"><input type="password" id ="password" name="person.password" /></span>
		<span class="status"></span>
	</div>
	<div class="row">
		<span class="label"><label id="lpasswordConfirm" for="passwordConfirm">密码确认</label></span>
		<span class="field"><input type="password" id ="confirmPassword" name="person.confirmPassword" /></span>
		<span class="status"></span>
	</div>
	<div class="row">
		<span class="label">&nbsp;</span>
		<span class="field">
			<input type="checkbox" id="terms" name="terms" />
			我已经认真阅读<a id="uterms" href="javascript:void(0);">书伴协议</a></span>
		<span class="status"></span>
	</div>
	<div class="row">
		<span class="label">&nbsp;</span><span class="field"><s:submit value="submit" /></span>
	</div>
	
	<div class="spacer"></div>
	</form>
</div>

<%@ include file="/WEB-INF/jsps/includes/terms.jsp"%>
<script type="text/javascript">
$(document).ready(function() { 
    // validate signup form on keyup and submit 

    var validator = $("#signupform").validate({ 
        debug: false,
        rules: { 
		    'person.email': { 
		        required: true, 
		        email: true//, 
		        //remote: "emails.php" 
		    },
            'person.password': { 
                required: true, 
                minlength: 5 
            }, 
            'person.confirmPassword': { 
                required: true, 
                minlength: 5, 
                equalTo: "#password" 
            },  
            terms: "required" 
        }, 
        messages: {
        	'person.email': { 
	            required: "Please enter a valid email address", 
	            minlength: "Please enter a valid email address"//, 
	            //remote: jQuery.format("{0} is already in use") 
	        }, 
	        'person.password': { 
                required: "Provide a password", 
                rangelength: jQuery.format("Enter at least {0} characters") 
            }, 
            'person.confirmPassword': { 
                required: "Repeat your password", 
                minlength: jQuery.format("Enter at least {0} characters"), 
                equalTo: "Enter the same password as above" 
            }, 
            terms: " " 
        }, 
        // the errorPlacement has to take the table layout into account 
        errorPlacement: function(error, element) { 
            if ( element.is(":radio") ) 
                error.appendTo( element.parent().next().next() ); 
            else if ( element.is(":checkbox") ) 
                error.appendTo ( element.parent().next() ); 
            else {
                error.appendTo( element.parent().next() );
            } 
        }, 
        // specifying a submitHandler prevents the default submit, good for the demo 
        submitHandler: function(form) { 
            form.action = "${ctx}/signup/";
			form.submit(); 
        }, 
        // set this class to error-labels to indicate valid fields 
        success: function(label) { 
            // set   as text for IE 
            label.html(" ").addClass("checked"); 
        } 
    });
}); 
</script>
</body>
